<template>
	<view class="wrap">
		<text class="couponName">优惠券名称:{{counponInfo.couponName}}</text>
		<text class="other">使用类型: {{counponInfo.applicableUnit}}</text>
		<text class="other">面值:{{counponInfo.money}}</text>
		<text class="other">有效期:{{counponInfo.useTime}}</text>

		<view class="givingInfo" v-if="showGive">
			<image style="margin-top: 40upx; width: 150upx; height: 150upx; border-radius: 75upx;"
				:src="counponInfo.vxUrl" mode=""></image>
			<text style="margin-top: 20upx;">微信用户</text>
			<text style="margin-top: 20upx;">赠送了一张{{counponInfo.businessName}}优惠券</text>
			<view class="button" @click="givingCoupon">
				领取优惠券
			</view>
		</view>

		<text class="other">满{{counponInfo.conditionMoney}}可用</text>

		<view class="descWrap">

			<text class="descTitle">使用说明: </text>
			<view class="descContent">
				<view class="desc1">
					1. {{counponInfo.applicableUnitType == 1 ? '全场通用' : '部分门店可用'}}
					<!-- <text class="desc2" @click="goStore">查看适用门店></text> -->
				</view>
				<view class="desc1 desc-item">
					2. {{counponInfo.useNotice}}
				</view>
				<!-- <view class="desc1 desc-item">
					3.最终解释权归blablabla店所有
				</view> -->
				<view class="desc2 desc-item" v-if="counponInfo.useArea!=1" @click="goCar">
					查看指定车型>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		apiMyCouponInfo,
		turnCoupon
	} from '@/api/marketing-api.js'
	export default {
		data() {
			return {
				counponInfo: {},
				memberId: '',
				showGive: false,
				turnMemberNo: ''
			}
		},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin;
			}
		},
		onLoad(op) {
			this.memberId = op.memberId;
			if (op.type == 1) { //转赠进来
				this.turnMemberNo = op.turnMemberNo;
				this.showGive = true;
			}
			this.getData();
		},
		methods: {
			getData() {
				apiMyCouponInfo(
					this.memberId
				).then(res => {
					this.counponInfo = res.data;
				})
			},

			givingCoupon() {
				if(this.isLogin) {
					turnCoupon({
						memberNo: this.$store.state.user.userInfo.memberNo,
						memberId: this.memberId,
						turnMemberNo: this.turnMemberNo
					}).then(res => {
						uni.showToast({
							title: '领取成功',
							icon: 'success'
						})
						uni.redirectTo({
							url: './mine-couponList'
						})
					})
				}else{
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}
				
			},

			goStore() {
				uni.navigateTo({
					url: './coupon-store?businessId=' + this.counponInfo.businessId
				})
			},
			goCar() {
				uni.navigateTo({
					url: './coupon-car?businessId=' + this.counponInfo.businessId
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.wrap {
		margin: 30upx;
		padding: 30upx;
		border-radius: 16upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.couponName {
		font-size: 36upx;
		color: #E93131;

	}

	.other {
		font-size: 30upx;
		color: #666666;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}

	.givingInfo {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.button {
		margin: 30upx;
		background-color: $main-color;
		color: #FFFFFF;
		line-height: 60upx;
		text-align: center;
		align-self: center;
		font-size: 30upx;
		border-radius: 50upx;
		padding: 0 30upx;
	}


	.descWrap {
		display: flex;
		background-color: #fff;
		padding: 30upx;
		position: relative;
		top: -10upx;
	}

	.descTitle {
		display: inline-block;
		font-size: 20upx;
		color: #666;
		width: 200upx;
		text-align: right;
	}

	.descContent {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 10upx;
	}


	.desc1 {
		font-size: 20upx;
		color: #666;
	}

	.desc2 {
		font-size: 20upx;
		color: $main-color;
	}

	.desc-item {
		margin-top: 18upx;
	}
</style>
